<template>
    <div>
           <div class="header">
               <router-link tag="span" to="/city">{{this.$store.state.city}}<i class="iconfont city ">&#xe613;</i></router-link>
              <div class="header-input">
                <input  type="text" placeholder="请输入商家名、品类或者商圈..."> 
                <i class="iconfont search">&#xe614;</i>
              </div>
           </div>
    </div>
</template>

<script>



export default {
    name:'HomeHeader',
    data (){
        return {
           
        }
    }
}
</script>

<style scoped>
.header{
width:100%;

height:30px;
position: relative;

}
.header .city{
    top:10px;
    margin-left:2%;
    position: absolute;
}
span{
    float: left;
    margin-top:1%;
    font-size:16px;
    padding-left:2%;
}
.header-input{
     float: left;
     width:75%;
}
input{
    border-radius: 30px;
    width:85%;
    margin-left:10%;
    padding-left:40px;
    outline: none;
    border:0;
    
    font-size:12px;
    height:23px;
    margin-top:2px;
    background:#F5F5F5;
}
.search{
    position: absolute;
    padding-left:12%;
     top:22%;
}
</style>
